<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="interfaceName" placeholder="请输入接口名称查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="requestPath" placeholder="请输入请求路径查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="requsetMethodQuery" placeholder="请求方式" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in requsetMethod" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findAll(size,current)">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="clearfind">重置</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-delete" @click="deletelist">删除</el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        接口名称
      </el-checkbox>
      <el-checkbox v-model="showReviewerIp" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        端口
      </el-checkbox>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column fixed prop="caseId" label="ID" width="50" align="center">
      </el-table-column>
      <el-table-column prop="caseName" label="用例名称" min-width="150" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column v-if="showReviewer" prop="interfaceName" label="接口名称" width="100" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column prop="ip" label="IP地址" width="150" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column prop="requestPath" label="请求路径" width="100" :show-overflow-tooltip='true' align="center">
        <template slot-scope="{row}">
             <span class="link-type" @click="update(row.caseId)">{{ row.requestPath }}</span>
          </template>
      </el-table-column>
      <el-table-column prop="parameterType" label="参数类型" width="100" align="center">
      </el-table-column>
      <el-table-column prop="requsetMethod" label="请求方式" width="100" align="center">
      </el-table-column>
      <el-table-column v-if="showReviewerIp" prop="port" label="端口" width="100" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="100" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="150" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="500">
        <template slot-scope="scope">
          <el-button @click="excute(scope.row.caseId)" type="success" size="mini">执行</el-button>
          <el-button @click="copycase(scope.row.caseId)" type="primary" size="mini">复制</el-button>
          <el-button @click="detailResult(scope.row.caseId)" type="primary" size="mini">结果</el-button>
          <el-button @click="update(scope.row.caseId)" type="primary" size="mini">编辑</el-button>
          <el-button @click="beforeAssertion(scope.row.caseId)" type="primary" size="mini">后置</el-button>
          <el-button @click="deleteOne(scope.row.caseId)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 测试结果 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose" >
      <el-descriptions title="执行结果:" direction="descriptions" :column="1" border :contentStyle="CS" :label-style="LS " >
<!--        <el-descriptions-item label="结果id:">{{resultInfo.id}}</el-descriptions-item> -->
        <el-descriptions-item label="合集名称:">{{resultInfo.collectionName}}</el-descriptions-item>
        <el-descriptions-item label="用例名称:">{{resultInfo.caseName}}</el-descriptions-item>
        <el-descriptions-item label="状态:">{{resultInfo.statusMenus}}</el-descriptions-item>
        <el-descriptions-item label="执行结果:">{{resultInfo.result}}</el-descriptions-item>
        <el-descriptions-item label="返回信息:" >{{resultInfo.message}}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增测试用例" :visible.sync="dialogFormVisible">
      <el-input type="text" placeholder="用例名称" v-model="caseNameAdd" maxlength="15" show-word-limit>
      </el-input>
      <el-table :data="interfaceRecords" ref="multipleTableInterface" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column property="interfaceId" label="接口Id" width="100"></el-table-column>
        <el-table-column property="interfaceName" label="接口名称" width="200"></el-table-column>
        <el-table-column property="parameterType" label="参数类型" width="100"></el-table-column>
        <el-table-column property="requsetMethod" label="请求方式" width="100"></el-table-column>
        <el-table-column property="requestPath" label="请求路径" width="200"></el-table-column>
        <el-table-column property="testingEnvironment" label="测试环境id" width="100"></el-table-column>
        <el-table-column property="apiname" label="测试环境名称" width="200"></el-table-column>
        <el-table-column property="ip" label="ip地址" width="100"></el-table-column>
        <el-table-column property="port" label="端口" width="100"></el-table-column>
        <el-table-column property="agreement" label="协议类型" width="100"></el-table-column>
        <el-table-column property="remark" label="接口说明" width="200"></el-table-column>
        <el-table-column property="createTime" label="创建时间" width="100"></el-table-column>
        <el-table-column property="lastupdateTime" label="修改时间" width="100"></el-table-column>
      </el-table>
      <!-- 接口用例分页 -->
      <el-pagination @size-change="handleSizeChangeInterface" @current-change="handleCurrentChangeInterface"
        :current-page="currentInterface" :page-sizes="pagesizesInterface" :page-size="sizeInterface"
        layout="total, sizes, prev, pager, next, jumper" :total="totalInterface">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCase()">确 定</el-button>
      </div>
      <!-- 分页 -->
    </el-dialog>
    <!-- 复制测试用例 -->
    <el-dialog title="复制测试用例" :visible.sync="dialogFormAddVisiblecopy">
      <el-form :model="caseCopySave">
        <el-form-item label="测试用例名称:" :label-width="formLabelWidth">
          <el-input v-model="caseCopySave.caseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="caseCopySave.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAddVisiblecopy = false">取 消</el-button>
        <el-button type="primary" @click="copyTrue()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import {requsetMethodTypeGet} from '@/api/automation/interface'
  import { findAllList, findInterfacelist,addCasePost,deleteCasePost,excuteCase,getResult,copyCase} from '@/api/automation/case'
  export default {
    name: "Case",
    directives: { waves },
    data() {
      return {

        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all',
        },
        tableKey:0,
        listLoading: true,
        formLabelWidth: '120px',
        user: {},
        total: 0,
        current: 1,
        size: 10,
        pagesizes: [10, 20, 50, 100],
        interfaceName: "",
        requsetMethodQuery: "",
        requestPath: "",
        records: [],
        requsetMethod:[],
        dialogFormVisible: false,
        interfaceRecords: {},
        caseNameAdd: "",
        totalInterface: 0,
        currentInterface: 1,
        sizeInterface: 10,
        pagesizesInterface: [10, 20, 50, 100],
        resultInfo: {},
        drawer: false,
        direction: 'rtl',
        caseCopySave:{},
        caseCpoyCaseId:"",
        dialogFormAddVisiblecopy:false,
        showReviewer:false,
        showReviewerIp:false

      }
    },
    methods: {
      getUser() {
        var json = localStorage.getItem("user");
        this.user = JSON.parse(json);
      },
      //清空查询条件
      clearfind() {
        this.interfaceName="";
        this.requestPath="";
        this.requsetMethodQuery="";
        this.findAll(this.size, this.current);
      },
      //请求方式
      findAllrequsetMethod(){
        requsetMethodTypeGet().then(resp=>{
            this.requsetMethod=resp.data;
        })
      },
      findAll(size, current) {
        this.listLoading = true
        findAllList( {
          current: current,
          size: size,
          interfaceName: this.interfaceName,
          requsetMethod: this.requsetMethodQuery,
          requestPath: this.requestPath
        }).then(resp => {
            this.total = resp.data.total;
            this.current = resp.data.current;
            this.size = resp.data.size;
            this.records = resp.data.records;
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
        })
      },
      //条数变更
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll(val, this.current)
      },
      //页码变更
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll(this.size, val)
      },

      //新增界面接口条数变更
      handleSizeChangeInterface(val) {
        console.log(`每页 ${val} 条`);
        this.interfacelist(val, this.currentInterface)
      },
      //新增界面接口页码变更
      handleCurrentChangeInterface(val) {
        console.log(`当前页: ${val}`);
        this.interfacelist(this.sizeInterface, val)
      },
      //新增测试用例页面 接口只能单选
      handleSelectionChange(val) {
        console.log("selection rows:" + val);
        if (val.length > 1) {
          this.$refs.multipleTableInterface.clearSelection()
          this.$refs.multipleTableInterface.toggleRowSelection(val.pop())
        }
      },
      //接口列表
      interfacelist(size, current) {
        findInterfacelist( {
          current: current,
          size: size,
        }).then(resp => {
            this.totalInterface = resp.data.total;
            this.currentInterface = resp.data.current;
            this.sizeInterface = resp.data.size;
            this.interfaceRecords = resp.data.records;
        })
      },
      //进入新增页面
      add() {
        this.interfacelist(this.sizeInterface, this.currentInterface);
        this.dialogFormVisible = true;
      },
      //新增测试用例
      addCase() {
        var interfaceId = "";
        this.$refs.multipleTableInterface.selection.forEach(item => {
          interfaceId = item.interfaceId;
        });
         addCasePost({
          interfaceId: interfaceId,
          remark: "",
          caseName: this.caseNameAdd
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.findAll(this.size, this.current);
        })
      },
      //删除测试用例
      deletelist() {
        var caseIdList = [];
        this.$refs.multipleTable.selection.forEach(item => {
          caseIdList.push(item.caseId);
        });
        deleteCasePost({
          caseIdList: caseIdList
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.findAll(this.size, this.current);
        });
      },
      deleteOne(caseId) {
        var caseIdList = [];
        caseIdList.push(caseId);
        deleteCasePost( {
          caseIdList: caseIdList
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.findAll(this.size, this.current);
        });
      },
      //编辑参数
      update(caseId) {
        localStorage.setItem("caseId", caseId);
        this.$router.push('/automation/params');
      },
      //执行用例
      excute(caseId) {
        excuteCase( {
          caseId: caseId
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
        });
      },
      detailResult(caseId) {
        getResult({
          caseId: caseId,
          collectionId: 0
        }).then(resp => {
            this.resultInfo = resp.data;
            this.drawer = true;
        })
      },
      handleClose(done) {
          done();
      },
      beforeAssertion(caseId){
        localStorage.setItem("caseBeforeAssertionId", caseId);
        this.$router.push('/automation/beforeAssertion');
      },
      copycase(caseId){
        this.caseCopySave.caseId=caseId;
        this.dialogFormAddVisiblecopy=true;
      },
      copyTrue(){
        console.log(this.caseCopySave)
        copyCase(this.caseCopySave).then(resp=>{
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.dialogFormAddVisiblecopy=false;
            this.findAll(this.size,this.current);
        })
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }
    },
    created() {
      this.getUser();
      this.findAll(this.size, this.current);
      this.findAllrequsetMethod();
    }
  }

</script>

<style>
  .paginationClass {
      position: fixed;
      bottom: 0;
      height: 40px;
      width: 100%;
      text-align: center;
  }
</style>
